<!--用户中心 -->
<template>
	<div class="contact flex" id="usermsg">
		<div class="information">
			<div class="topfixed">
				<div class="infosearch marginAuto flex">
					<div class="set" style="width:100px;" v-if="roleId == 3 || roleId == 7">设置</div>
					<div class="set" style="width:180px;" v-else>设置</div>
					<div class="logincode mainbg curpoin" v-if="roleId == 3 || roleId == 7" @click="showlogincodefun">登录码</div>
				</div>
			</div>
			
			<div class="infoblock">
				<div class="infoeach curpoin flex" v-for="(item,index) in infodata" :key="index"
					@click="infosefun(item,index)" :class="infodataac == item.id ? 'activeinfoeach':''">
					<div class="infoeachr">
						<p class="infoeachr-name ellipsis01">{{ item.name }}</p>
					</div>
					<div class="infoeachtime" v-if="infodataac == item.id">
						<span class="el-icon-arrow-right" style="position: absolute;top:13px;font-size:16px;"></span>
					</div>
				</div>
				<div class="infoeach curpoin flex"
					v-if="roleId == 3 || roleId == 7"
					@click="infosefun({id:4,name:'登录码管理'},3)" :class="infodataac == 4 ? 'activeinfoeach':''">
					<div class="infoeachr">
						<p class="infoeachr-name ellipsis01">登录码管理</p>
					</div>
					<div class="infoeachtime" v-if="infodataac == 4">
						<span class="el-icon-arrow-right" style="position: absolute;top:13px;font-size:16px;"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="rblock">
			<div class="ointrtitle">{{ infoacgs }}</div>
			<div class="depart">
				<usemsg v-if="infodataac == 1"></usemsg>
				<alterpass v-if="infodataac == 2"></alterpass>
				<useragr v-if="infodataac == 3"></useragr>
				<loginAdmin ref="loginadmin" v-if="infodataac == 4"></loginAdmin>
			</div>
		</div>
		
		<el-dialog  
		  title="生成登录码"
		  :visible.sync="logincodeaddis"
		  width="432px"
		  top="100px"
		  :before-close="logincodeClosefun"
		  :modal-append-to-body="false">
			<div class="lcodeeach flex">
				<div class="lcodeeachtitle">选择时间：</div>
			</div>
			<div class="lcodeeach flex">
				<div class="lcodeeachtitle" style="font-size: 14px;">起始时间</div>
				<div class="lcodeeachmsg">
					<el-time-picker
					    is-range
					    v-model="swtime"
					    range-separator=""
					    start-placeholder="开始时间"
					    end-placeholder="结束时间"
					    placeholder="选择时间范围"
						format="HH:mm"
						value-format="HH:mm"
						@change="swtimefun">
					  </el-time-picker>
				</div>
				<div class="lcodeeachicon"></div>
			</div>
			<!-- <div class="lcodeeach flex">
				<div class="lcodeeachtitle" style="font-size: 14px;">起始时间</div>
				<div class="lcodeeachmsg">
					<el-time-picker
					    is-range
					    v-model="xwtime"
					    range-separator=""
					    start-placeholder="开始时间"
					    end-placeholder="结束时间"
					    placeholder="选择时间范围"
						value-format="HH:mm"
						@change="xwtimefun">
					  </el-time-picker>
				</div>
				<div class="lcodeeachicon"></div>
			</div> -->
			<div class="lcodeeach flex">
				<div class="lcodeeachtitle">选择人员：</div>
				<el-button class="mainbg" style="width:70px;height:32px;color:#fff;margin-top:5px;" @click="alleyfun">全选</el-button>
			</div>
			<div class="pers flex">
				<div class="perseach" v-for="(item,index) in persdata" :key="index">
					<div class="perseach-main marginAuto flex curpoin" @click="persdatafun(item,index)">
						<div class="perseach-el" :class="item.idac ? 'perseach-elac':''">
						<!--(人员单选)  <div class="perseach-el" :class="peridac == item.user_id ? 'perseach-elac':''"> -->
							<span class="el-icon-check"></span>
						</div>
						<div class="perseachti ellipsis01">{{item.realname}}</div>
					</div>
				</div>
			</div>
		   <div class="logincodebtn flex">
			   <el-button class="logincodebtneach mainbg" @click="logincodeaddfun()">一键生成</el-button>
		   </div>
		</el-dialog>
	</div>
</template>

<script>
	import usemsg from '../set/usemsg.vue';  // 个人信息
	import alterpass from '../set/alterpass.vue';  // 修改密码
	import useragr from '../set/useragr.vue';  // 用户协议
	import loginAdmin from '../set/loginAdmin.vue';  // 登录管理
	export default {
		components:{
			usemsg,
			alterpass,
			useragr,
			loginAdmin
		},
		data(){
			return {
				roleId:'',  //  3售后总监  7 设计师经理
				searchtxt:'',
				infodata: [
					{id:1,name:'个人信息'},
					{id:2,name:'修改密码'},
					{id:3,name:'用户协议'}
				],
				infodataac: 1,
				infoacgs:'个人信息',
				logincodeaddis:false,
				swtime:'',
				xwtime:'',
				persdata:[],
				peridac:''
			}
		},
		mounted(){
			this.roleId = this.$store.state.roleId;
		},
		methods:{
			logincodeaddfun(){  // 生成登录码
				let sendData = {
					// user_id:this.peridac
				};
				if(!!this.swtime) {
					sendData.morning_start_work_time = this.swtime[0];
					sendData.afternoon_end_work_time = this.swtime[1];
				};
				// if(!!this.swtime){
				// 	sendData.morning_start_work_time = this.swtime[0].substr(0,5);
				// 	sendData.morning_end_work_time = this.swtime[1].substr(0,5)
				// };
				// if(!!this.xwtime){
				// 	sendData.afternoon_start_work_time = this.xwtime[0].substr(0,5)
				// 	sendData.afternoon_end_work_time = this.xwtime[1].substr(0,5)
				// };
				if(!this.swtime){  // && !this.xwtime
					this.$message({
					  message: '请输入上班时间',
					  type: 'warning'
					});
					return false
				};
				// if(this.peridac == ''){  // 人员单选
				// 	this.$message({
				// 	  message: '请选择相关人员',
				// 	  type: 'warning'
				// 	});
				// 	return false
				// };
				let perarr = [];
				this.persdata.forEach((item,index)=>{
					if(item.idac){
						perarr.push(item.user_id)
					}
				});
				sendData.user_id = perarr;
				if(perarr.length <= 0){
					this.$message({
					  message: '请选择相关人员',
					  type: 'warning'
					});
					return false
				};
				this.apifun.$post('/pc/Department/addLoginCode',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '生成成功',
							type: 'success'
						});
						if(this.infodataac == 4){
							this.$refs.loginadmin.getlcode();
						};
						this.logincodeaddis=false;
					}
				})
			},
			persdatafun(item,index){  // 选择人员
				// this.peridac = item.user_id;
				// 下面为多选人员功能
				if(item.idac){
					item.idac = false;
				}else{
					this.$set(item,'idac',true);
				}
			},
			alleyfun(){
				this.persdata.forEach((item,index)=>{
					this.$set(item,'idac',true);
				});
			},
			getperfun(){  // 获取人员列表
				let urls = '/pc/Department/designerLoginCode';
				if(this.roleId == 3){  //（售后总监）
					urls = '/pc/Department/queryLoginCode';   // 设计师经理
				}else if (this.roleId == 7){ // （设计经理查）
					urls = '/pc/Department/designerLoginCode';   // 设计师登录码
				}
				this.apifun.$post(urls,{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						let datas = res.data;
						if(datas.length > 0){
							this.persdata = datas;
						}
					}
				})
			},
			logincodeClosefun(){  // 关闭弹窗
				this.logincodeaddis = false;
			},
			swtimefun(e){
				this.swtime = [e[0],e[1]]
			},
			xwtimefun(e){
				this.xwtime = [e[0],e[1]]
			},
			// -------
			infosefun(item,index){  // 切换功能导航
				this.infodataac = item.id;
				this.infoacgs = item.name
			},
			showlogincodefun(){  // 登陆吗
				this.logincodeaddis = true;
				this.swtime='';
				this.xwtime = '';
				this.peridac = '';
				this.getperfun()
			},
		}
	}
</script>
<style>
	#usermsg .el-range-editor--small.el-input__inner{
		width:270px;
		height:38px;
		line-height:38px;
		border: none;
		background-color:#F6F6F6;
	}
	#usermsg .el-range-editor--small.el-input__inner .el-range-input{
		background-color:#F6F6F6;
	}
	#usermsg .el-dialog__body{
		padding: 0px 20px 20px !important;
	}
</style>
<style scoped lang="scss">
	.information {
		position: relative;
		width: 180px;
		padding: 0 10px;
		height: 98vh;
		overflow-y: auto;
		border-right: 1px solid #EBEBEB;
	}
	.topfixed{
		position:sticky;
		z-index:50;
		top: 0;
		left: 0;
		width:200px;
		background-color: #fff;
	}
	// 搜索
	.infosearch {
		position: fixed;
		top: 0;
		z-index:50;
		width: 180px;
		height:44px;
		background-color: #fff;
		.set{
			height: 40px;
			line-height:40px;
			padding: 0 10px;
			font-size: 14px;
			color: #333;
			border-radius:10px;
			background-color: var(--bgColor);
		}
		.logincode{
			width:60px;
			height: 40px;
			line-height:40px;
			text-align: center;
			color: #fff;
			border-radius: 10px;
			font-size:14px;
		}
	}
	
	// 消息列表
	.infoblock {
		padding-top: 40px;
		margin-top: 20px;
	
		.infoeach {
			width: 170px;
			padding: 5px; 
			margin-bottom:10px;
			border-radius: 10px;
			.infoeachr {
				width:140px;
				margin-left: 10px;
	
				.infoeachr-name {
					line-height:40px;
					font-size: 14px;
					color: #333333;
				}
	
				.infoeachr-msg {
					line-height: 20px;
					font-size: 12px;
					color: var(--mainColor);
				}
			}
	
			.infoeachtime {
				position: relative;
				color: #fff;
				font-size: 12px;
				line-height:40px;
			}
		}
	
		.activeinfoeach {
			background-color: var(--mainColor);
	
			.infoeachr {
				.infoeachr-name {
					color: #fff;
				}
	
				.infoeachr-msg {
					color: #fff !important;
				}
			}
		}
	}
	// 右部信息
	.rblock{
		position: relative;
		flex: 1;
		z-index: 99;
		background-color:#F7F7F7;
	}
	.ointrtitle{
		width:96%;
		padding:0px 2% 10px;
		height:40px;
		line-height: 40px;
		border-bottom: 1px solid #EEEEEE;
		color:#333333;
		font-size:14px;
		font-weight: bold;
		background-color: #fff;
	}
	// 弹窗
	.lcodeeach{
		padding: 10px 0;
		.lcodeeachtitle{
			width:80px;
			height:40px;
			line-height:40px;
			font-size: 16px;
		}
		.lcodeeachmsg{
			height:40px;
			line-height:40px;
		}
	}
	.pers{
		width: 100%;
		height:100px;
		overflow-y: scroll;
		flex-wrap: wrap;
		.perseach{
			width:33%;
			height:30px;
			margin-bottom:20px;
			.perseach-main{
				height:30px;
				.perseach-el{
					width: 25px;
					height: 25px;
					line-height: 25px;
					text-align: center;
					background-color: #EBEBEB;
					border-radius: 10px;
					margin-right:10px;
					color:#EBEBEB;
				}
				.perseach-elac{
					background-color: var(--mainColor);
					color: #fff;
				}
				.perseachti{
					width:80px;
					line-height:25px;
					color: #333333;
					font-size:14px;
				}
			}
			
		}
	}
	.logincodebtn{
		width: 100%;
		justify-content:flex-end;
		margin-top:20px;
		.logincodebtneach{
			width: 130px;
			height: 40px;
			color:#fff;
			font-size: 16px;
			border-radius:10px;
		}
	}
</style>